<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>工作流列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../../res/layui/css/layui.css" rel="stylesheet">
  <link href="../../res/adminui/dist/css/admin.css" rel="stylesheet">
  <script src="../../res/jquery-3.6.0.min.js"></script>
  <script src="../../res/layui/layui.js"></script> 
  <script src="../../res/socket.io.js"></script> 
  <style>
    /* 自定义样式  */
    .layui-table-plugincss .layui-table-header,
    .layui-table-plugincss thead tr{background-color: #F8FCF9; color: #16BAAA}
    .layui-form-plugincss > div{margin-bottom: 6px;}

    .status-testing, .status-running {
      color: orange; /* 橙色用于测试和执行中的状态 */
      }
      .status-completed {
        color: green; /* 绿色用于完成状态 */
      }
      .status-failed {
        color: red; /* 红色用于失败状态 */
      }

  </style>

</head>

<body class="layui-padding-3">
	
	<div class="layui-panel layui-border-green" style="width: 80%; margin: 10px auto;">
	  <div style="padding: 16px;">
		运行工作流时，可以切换其它页面，也可以关闭浏览器，但不能关闭程序<br>
    不能同时运行多个工作流<br>
	  </div>
	</div>	

	<div><button id="clearLocalStorageBtn" class="layui-btn layui-btn-danger">清除本地存储</button>
    <button id="CreWF" class="layui-btn">创建新的工作流</button></div>

  <div style="padding: 16px;"> 
    <table class="layui-hide" id="ID-table-WF-css" lay-filter="ID-WF"></table>
  </div>
  <script type="text/html" id="ID-table-plug-css-user">
    <ul>
      <li>{{= d.PlugName }} </li>
    </ul>
 </script>
  <script type="text/html" id="ID-table-WF-css-tool">
    <div class="layui-form layui-form-WFcss">
    </div>
  </script>

<script>
layui.use(['table', 'layer'], function(){
  var table = layui.table;
  var layer = layui.layer;
  var socket = io.connect('http://' + document.domain + ':' + location.port);
  var workflowData = [];  // 用于存储表格数据
  var isWorkflowRunning = false;  // 标记是否有工作流正在执行
  isWorkflowRunning = localStorage.getItem('isWorkflowRunning') === 'true';

  var tableInstance = table.render({
    elem: '#ID-table-WF-css',
    method: 'POST',
    url: '/workflow', // 后端接口
    contentType: 'application/json',
    where: { action: 'WF_list' }, // 请求参数
    page: true,
    height: 'full-35',
	lineStyle: 'height: 80px;', // 定义表格的多行样式
      css: [ // 直接给当前表格主容器重置 css 样式
        '.layui-table-page{text-align: center;}' // 让分页栏居中
      ].join(''),
      className: 'layui-table-WFcss', // 用于给表格主容器追加 css 类名

    cols: [[
      {field: 'WorkFlowName', width: 160, title: '流名称', templet: '#ID-table-WF-css-user'},
      {field: 'WorkFlowDes', minWidth: 500, title: '流描述'},
      {field: 'taskCount', minWidth: 100, title: '任务数'},
      {field: 'WorkFlowstatus', width: 200, title: '当前状态'},

      {width: 300, title: '操作', templet: 
            `
            <button type="button" class="layui-btn layui-bg-purple" lay-event="btn_running">运行</button>
            <button type="button" class="layui-btn" lay-event="btn_config">配置</button>
            ` 
        }
    ]],

    done: function(res, curr, count) {
      // 从服务器加载完数据后，直接使用服务器的状态数据更新UI
      $(".layui-table tbody tr").each(function(index) {
        var currentData = res.data[index]; // 从返回的数据中取得当前行的数据
        if (currentData) {
          var $row = $(this);
          var statusCell = $row.find('td[data-field="WorkFlowstatus"]').find(".layui-table-cell");
          var buttonCell = $row.find('button.layui-btn');
          updateStatusAndButtons(statusCell, buttonCell, currentData.WorkFlowstatus);
          localStorage.setItem('workflowStatus-' + currentData.ID, currentData.WorkFlowstatus); // 更新localStorage
        }
      });
    }

  });
  // 定期刷新工作流状态
  function refreshTable() {
    if (isWorkflowRunning) {
      tableInstance.reload({
        where: { action: 'WF_list' }
      });
    }
  }

  setInterval(refreshTable, 10000); // 设置间隔为10秒

  // 监听工具条
  table.on('tool(ID-WF)', function(obj){
    var data = obj.data;  // 当前行的数据
    var layEvent = obj.event;  // 当前点击的事件名

    if(layEvent === 'btn_running'){  // 如果点击了“运行”按钮
      if (parseInt(data.taskCount) < 2) {
        layer.alert('工作流至少包含2个或以上任务', {title: '错误', closeBtn: 0});
        return;
      }

        if(isWorkflowRunning){
            layer.alert('有其它工作流正在运行，请稍候再试。');  // 显示警告
        } else {
            layer.confirm('确定是否运行工作流？运行后可以切换网页，但请不要关闭主程序！', function(index){
                socket.emit('start_workflow', {id: data.ID});  // 发送运行命令到后端
                isWorkflowRunning = true;  // 标记为有工作流正在执行
                localStorage.setItem('isWorkflowRunning', 'true');  // 保存状态到 localStorage
                layer.close(index);
            });
        }
    }
    else if(layEvent === 'btn_config'){  // 其他按钮事件...
        var id = data.ID;
        window.location.href = 'CreWF.html?id=' + encodeURIComponent(id);
    }
});

socket.on('status', function(data) {
  console.log('Status update received:', data); // 调试输出

  // 检查工作流状态是否表示完成或失败
  var isCompleted = ['所有脚本成功执行','任务已经完成', '执行工作流失败', '测试工作流失败'].some(function(statusText) {
    return data.message.includes(statusText);
  });


  // 遍历当前页面的表格数据
  $(".layui-table tbody tr").each(function() {
    var $row = $(this); // 当前行的jQuery对象
    var currentData = table.cache['ID-table-WF-css'][$row.data('index')]; // 获取当前行的数据对象

    if (currentData && currentData.ID === data.workflow_id) {
      var statusCell = $row.children('td[data-field="WorkFlowstatus"]').children(".layui-table-cell");
      var buttonCell = $row.find('button.layui-btn'); // 找到按钮

      // 更新状态文本
      statusCell.text(data.message);
      localStorage.setItem('workflowStatus-' + data.workflow_id, data.message); // 保存状态到 localStorage

      // 更新状态样式和按钮状态
      updateStatusAndButtons(statusCell, buttonCell, data.message);
      //localStorage.setItem('workflowStatus-' + data.workflow_id, data.message); // 保存状态到 localStorage

      // 根据状态更新运行标记
      if (data.message.includes('任务已经完成') || data.message.includes('执行工作流失败') || data.message.includes('测试工作流失败')) {
          isWorkflowRunning = false;  // 重置运行状态
          localStorage.setItem('isWorkflowRunning', 'false');
      }
      // 如果工作流已完成或失败，更新isWorkflowRunning为false
      if (isCompleted) {
        isWorkflowRunning = false;
        localStorage.setItem('isWorkflowRunning', 'false');
      }

    }
  });
});


// document.getElementById('clearLocalStorageBtn').addEventListener('click', function() {
//   if (isWorkflowRunning) {
//         layer.msg('当前程序正在运行，不可清空。', {icon: 5}); 
//     } else {
//         localStorage.clear();
//         isWorkflowRunning = false;
//         location.reload(); 
//     }
// });
document.getElementById('clearLocalStorageBtn').addEventListener('click', function() {
  if (isWorkflowRunning) {
    layer.msg('当前程序正在运行，不可清空。', {icon: 5});  // 使用layui的图标5显示警告
  } else {
    // 构建发送到服务器的数据
    const data = { action: 'clear_WF_list' };

    // 发送POST请求到服务器
    fetch('/workflow', {
      method: 'POST',  // 设置请求方法为POST
      headers: {
        'Content-Type': 'application/json'  // 设置请求体类型为JSON
      },
      body: JSON.stringify(data)  // 将JavaScript对象转换为JSON字符串
    })
    .then(response => response.json())  // 解析JSON响应
    .then(data => {
      console.log('Success:', data);  // 在控制台输出成功信息
      // 清除localStorage并重载页面
      localStorage.clear();
      isWorkflowRunning = false;
      location.reload();
    })
    .catch((error) => {
      console.error('Error:', error);  // 在控制台输出错误信息
    });
  }
});


// 更新状态样式和按钮状态的函数
function updateStatusAndButtons(statusCell, buttonCell, message) {
  statusCell.text(message);
  statusCell.removeClass('status-testing status-running status-completed status-failed');

  if (message.includes('正在测试工作流') || message.includes('正在执行工作流')) {
    statusCell.addClass('status-testing status-running');
    buttonCell.prop('disabled', true).addClass('layui-btn-disabled');
    localStorage.setItem('isWorkflowRunning', 'true');  // 确保状态在运行中时正确设置

  } else if (message.includes('任务已经完成')) {
    statusCell.addClass('status-completed');
    buttonCell.prop('disabled', false).removeClass('layui-btn-disabled');
    isWorkflowRunning = false;
    localStorage.setItem('isWorkflowRunning', 'false');  // 更新状态到 localStorage

  } else if (message.includes('执行工作流失败') || message.includes('测试工作流失败')) {
    statusCell.addClass('status-failed');
    buttonCell.prop('disabled', false).removeClass('layui-btn-disabled');
    isWorkflowRunning = false;
    localStorage.setItem('isWorkflowRunning', 'false');  // 更新状态到 localStorage

  }
}
  // 绑定点击事件处理器到按钮
  $('#CreWF').on('click', function() {
    // 更改当前页面的URL为NewWF.html
    window.location.href = 'NewWF.html';
  });

});

</script>

</body>
</html>
